<template>
  <div class="footer text-center" v-lazy:background-image="bgUrl_footer">
    <div class="footer-content">
      <div class="footer-content-title">“让你能全面掌握业务的快递成本”</div>
      <div class="footer-content-title">并节省宝贵时间</div>
      <div class="footer-content-text">如果运费价格符合你的心里，你可以建立你的账户，数分钟内获得快递运单并发出你的包裹，该工具完全免费，没有任何条件！</div>
      <div class="footer-content-button">
        <div @click="OpenLogin()">免费试用</div>
      </div>
      <div class="authority">
        <span>Copyright © 2023-2024 深圳市瑞克斯安捷供应链科技有限公司 All rights reserved. <a href="https://beian.miit.gov.cn/#/Integrated/index" target="value">{{ isHostName }}</a></span>
      </div>
    </div>  
    <!-- LoginDialog -->
    <LoginDialog ref="refLoginDialog" :dialogVisible.sync="loginShow" @closeSpecial="handleClose" />
  </div>
</template>
<script>
import LoginDialog from '@/components/LoginDialog'
import bgUrl_footer from '@/assets/img/common/footer.png'
export default {
  name: "Footer",
  components: { LoginDialog },
  data () {
    return {
      loginShow: false,
      // 懒加载背景图
      bgUrl_footer: bgUrl_footer
    };
  },
  computed: {
    isHostName() {
      const { hostname } = window.location
      if(hostname == 'www.rikses.com') {
        return '粤ICP备2023124875号-3'
      }else if(hostname == 'www.rksaj.net') {
        return '粤ICP备2023124875号-1'
      }else {
        return '粤ICP备2023124875号'
      }
    }
  },
  methods: {
    OpenLogin() {
      this.loginShow = true
      this.$refs.refLoginDialog.getWxLogin()
    },
    handleClose() {
      this.loginShow = false
    }
  }
};
</script>
<style lang="scss" scoped>
/* Footer */
.footer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: url("../assets/img/common/footer.png") 0 0 no-repeat;
  background-repeat:  no-repeat;
  background-size: 100% auto;
  width: 100%;
  // height: 335px;
  padding: 66px 0 54px 0;
  color: #fff;
  transition: all ease 0.6s;
  // 适配手机端
  @media (max-width:767px) {
    height: 300px !important;
    background-size: 1000px 350px !important;
    background-position: -200px -50px !important;
    &-content {
      &-title {
        font-size: 20px !important;
      }
      &-text {
        padding: 18px 15px 0 15px !important;
      }
    }
  }
  &-content {
    &-title {
      line-height: 50px;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #E5E5E5;
    }
    &-text {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #FFFFFF;
      padding-top: 22px;
    }
    &-button {
      display: flex;
      justify-content: center;
      div {
        text-align: center;
        background: #FF7F43;
        color: #FFFFFF;
        font-size: 12px;
        border-radius: 2px;
        padding: 8px 35px;
        margin: 30px 0 0 0;
        cursor: pointer;
        &:hover {
          background: rgba(255, 127, 67,0.8);
        }
      }
    }
    .authority {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      span {
        font-size: 12px;
      }
      a {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>

